<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
				position: relative;
			}
			canvas{
				position: absolute;
				left:-100px ;
				top: -80px;
				width:1490px ;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="1300" height="620"></canvas>
		
		<script type="text/javascript">
var numbers = [
				[
				[0, 0, 1, 1, 1, 1, 1, 0, 0],
				[0, 1, 1, 0, 0, 0, 1, 1, 0],
				[0, 1, 1, 0, 0, 0, 1, 1, 0],
				[0, 1, 1, 0, 0, 0, 1, 1, 0],
				[0, 1, 1, 0, 0, 0, 1, 1, 0],
				[0, 1, 1, 0, 0, 0, 1, 1, 0],
				[0, 1, 1, 0, 0, 0, 1, 1, 0],
				[0, 1, 1, 0, 0, 0, 1, 1, 0],
				[0, 1, 1, 0, 0, 0, 1, 1, 0],
				[0, 0, 1, 1, 1, 1, 1, 0, 0]
			
				], //定义数组写0
				[
				[0, 0, 0, 1, 1, 1, 0, 0, 0],
				[0, 0, 1, 1, 1, 1, 0, 0, 0],
				[0, 1, 1, 1, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0],
				[0, 1, 1, 1, 1, 1, 1, 1, 0],
				[0, 1, 1, 1, 1, 1, 1, 1, 0]
				], //1
				[
			    [0, 0, 1, 1, 1, 1, 1, 0, 0],
				[0, 1, 1, 1, 1, 1, 1, 1, 0],
				[0, 0, 0, 0, 0, 0, 1, 1, 0],
				[0, 0, 0, 0, 0, 1, 1, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0],
				[0, 0, 0, 1, 1, 0, 0, 0, 0],
				[0, 0, 1, 1, 0, 0, 0, 0, 0],
				[0, 1, 1, 0, 0, 0, 0, 0, 0],
				[0, 1, 1, 1, 1, 1, 1, 1, 0],
				[0, 1, 1, 1, 1, 1, 1, 1, 0]
				], //2
				[
				[0, 1, 1, 1, 1, 1, 1, 1, 0],
				[0, 1, 1, 1, 1, 1, 1, 1, 0],
				[0, 0, 0, 0, 0, 1, 1, 0, 0],
				[0, 0, 0, 0, 1, 1, 0, 0, 0],
				[0, 0, 0, 1, 1, 1, 0, 0, 0],
				[0, 0, 0, 0, 0, 1, 1, 0, 0],
				[0, 0, 0, 0, 0, 0, 1, 1, 0],
				[0, 0, 0, 0, 0, 0, 1, 1, 0],
				[0, 1, 1, 1, 1, 1, 1, 1, 0],
				[0, 1, 1, 1, 1, 1, 1, 1, 0]
				], //3
				[
				[0,0, 0, 0, 0, 1, 1, 0,0],
				[0,0, 0, 0, 1, 1, 1, 0,0],
				[0,0, 0, 1, 1, 1, 1, 0,0],
				[0,0, 1, 1, 0, 1, 1, 0,0],
				[0,1, 1, 0, 0, 1, 1, 0,0],
				[0,1, 1, 1, 1, 1, 1, 1,0],
				[0,0, 0, 0, 0, 1, 1, 1,0],
				[0,0, 0, 0, 0, 1, 1, 0,0],
				[0,0, 0, 0, 0, 1, 1, 0,0],
				[0,0, 0, 0, 1, 1, 1, 1,0]
				], //4
				[
				[0,1, 1, 1, 1, 1, 1, 1,0],
				[0,1, 1, 0, 0, 0, 0, 0,0],
				[0,1, 1, 0, 0, 0, 0, 0,0],
				[0,1, 1, 1, 1, 1, 1, 0,0],
				[0,0, 0, 0, 0, 0, 1, 1,0],
				[0,0, 0, 0, 0, 0, 1, 1,0],
				[0,0, 0, 0, 0, 0, 1, 1,0],
				[0,0, 0, 0, 0, 0, 1, 1,0],
				[0,1, 1, 0, 0, 0, 1, 1,0],
				[0,0, 1, 1, 1, 1, 1, 0,0]
				], //5
				[
				[0,0, 0, 0, 1, 1, 1, 0,0],
				[0,0, 0, 1, 1, 0, 0, 0,0],
				[0,0, 1, 1, 0, 0, 0, 0,0],
				[0,1, 1, 0, 0, 0, 0, 0,0],
				[0,1, 1, 0, 1, 1, 1, 0,0],
				[0,1, 1, 0, 0, 0, 1, 1,0],
				[0,1, 1, 0, 0, 0, 1, 1,0],
				[0,1, 1, 0, 0, 0, 1, 1,0],
				[0,1, 1, 0, 0, 0, 1, 1,0],
				[0,0, 1, 1, 1, 1, 1, 0,0]
				], //6
				[
				[0,1, 1, 1, 1, 1, 1, 1,0],
				[0,1, 1, 0, 0, 0, 1, 1,0],
				[0,0, 0, 0, 0, 1, 1, 0,0],
				[0,0, 0, 0, 0, 1, 1, 0,0],
				[0,0, 0, 0, 1, 1, 0, 0,0],
				[0,0, 0, 0, 1, 1, 0, 0,0],
				[0,0, 0, 1, 1, 0, 0, 0,0],
				[0,0, 0, 1, 1, 0, 0, 0,0],
				[0,0, 0, 1, 1, 0, 0, 0,0],
				[0,0, 0, 1, 1, 0, 0, 0,0]
				], //7
				[
				[0,0, 1, 1, 1, 1, 1, 0,0],
				[0,1, 1, 0, 0, 0, 1, 1,0],
				[0,1, 1, 0, 0, 0, 1, 1,0],
				[0,1, 1, 0, 0, 0, 1, 1,0],
				[0,0, 1, 1, 1, 1, 1, 0,0],
				[0,1, 1, 0, 0, 0, 1, 1,0],
				[0,1, 1, 0, 0, 0, 1, 1,0],
				[0,1, 1, 0, 0, 0, 1, 1,0],
				[0,1, 1, 0, 0, 0, 1, 1,0],
				[0,0, 1, 1, 1, 1, 1, 0,0]
				], //8
				[
				[0,0, 1, 1, 1, 1, 1, 0,0],
				[0,1, 1, 0, 0, 0, 1, 1,0],
				[0,1, 1, 0, 0, 0, 1, 1,0],
				[0,1, 1, 0, 0, 0, 1, 1,0],
				[0,0, 1, 1, 1, 0, 1, 1,0],
				[0,0, 0, 0, 0, 0, 1, 1,0],
				[0,0, 0, 0, 0, 0, 1, 1,0],
				[0,0, 0, 0, 0, 1, 1, 0,0],
				[0,0, 0, 0, 1, 1, 0, 0,0],
				[0,0, 1, 1, 1, 0, 0, 0,0]
				], //9
				
				[
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0]
				],//:绘制冒号
			];
			var arcArr=[];//定义数组
			
			
			
			

			var canvas = document.getElementById("myCanvas");
			var ctx=canvas.getContext("2d");

			

			
			var R=10;//每个小球的半径
			var r,g,b;
			var img=new Image();//定义图片变量
			img.src="img/星空1.jpg";
			var balls=[];//定义balls的数组
			img.onload = function(){ //加载图片
				var date=new Date();  //获取当前时间
				setInterval(function(){	
					ctx.clearRect(0,0,1330,620);//清屏
					ctx.drawImage(img, 0, 0,1330,620);//加载背景图片面积
					var text=[1,0,":",5,3,":",8,9];
					var time=new Date();//更新当前时间
					if(time.getMinutes() != date.getMinutes()){//
						var mgw=date.getMinutes()%10;
						addBalls(640,100,mgw);//画爆破小球
						var msw1=parseInt(time.getMinutes()/10);
						var msw2=parseInt(date.getMinutes()/10);	
						if(msw2!=msw1){
							addBalls(480,100,msw2);
						}
//						date=time;						
					}
					if(time.getSeconds() != date.getSeconds()){
						//添加小球
						//判断秒的个位数
						var gw=date.getSeconds()%10;
						addBalls(1020,100,gw);
						var s1=parseInt(time.getSeconds()/10);
						var s2=parseInt(date.getSeconds()/10);	
						if(s2!=s1){
							addBalls(860,100,s2);
						}
						
						
					}
					
					if(time.getHours() != date.getHours()){
						var hgw=date.getMinutes()%10;
						addBalls(260,100,hgw);
						var m1=parseInt(time.getMinutes()/10);
						var m2=parseInt(date.getMinutes()/10);	
						if( m2!=m1){
							addBalls(100,100, m2);
						}					
					}
					date=time;
					text[0]=parseInt(date.getHours()/10);
					text[1]=date.getHours()%10;
					
					text[3]=parseInt(date.getMinutes()/10);
					text[4]=date.getMinutes()%10;
					
					text[6]=parseInt(date.getSeconds()/10);
					text[7]=date.getSeconds()%10;
					for(var t=0;t<text.length;t++){
						if(text[t]==":"){
							text[t]=10;
						}
						if(t==0||t==1){
							printNum(t*160+100,100,text[t]);//时的位置
						}
						else if(t==2){
							printNum(t*160+100,100,text[t]);//冒号的位置
						}
						else if(t==3||t==4){
							printNum(t*160,100,text[t]);
						}
						else if(t==5){
							printNum(t*160,100,text[t]);
						}
						else if(t==6||t==7){
							printNum(t*160-100,100,text[t]);
						}
					}
					drawBalls();//掉球
				},33);//33毫秒动一次
				};
				function addBalls(addX,addY,num){										
					
		           		
	           		for(i=0;i<numbers[num].length;i++){	
	           			var t=2*10*i;
						for(j=0;j<numbers[num][i].length;j++){
							var vx = Math.random()*5+5;
			           		if(Math.random()>0.5){
			           		 	vx = -vx;
			           		}
		           			var vy = Math.random()*10+5;
			           		if(Math.random()>0.5){
			           		 	vy = -vy;
			           		}
							var l=2*10*j;
							var r=parseInt(Math.random()*256);
							var g=parseInt(Math.random()*256);
							var b=parseInt(Math.random()*256);
							var a=Math.random();
							if(numbers[num][i][j]==1){
								balls.push([addX+l,addY+t,10,vx,vy,"rgba("+ r +","+ g +","+ b +","+ a +")"]);
							}
						}						
					}
		           	
					
					
				}
					//小球
				function drawBalls(){					
					for(var i=0;i<balls.length;i++){
						ctx.beginPath();
						ctx.fillStyle=balls[i][5];
						ctx.arc(balls[i][0],balls[i][1],balls[i][2],0,2*Math.PI);
						ctx.fill();
						balls[i][0]+=balls[i][3];						
						if(balls[i][1]>canvas.height){
							balls[i][4]=-balls[i][4];
							balls[i][4]=0.6*balls[i][4];//阻力，影响下次的弹跳高度，如果不加会越弹高
							balls[i][1]=600-balls[i][2];
						}
						balls[i][1]+=balls[i][4];
						balls[i][4]+=3;
					}
					
				}
				
				
				//打印时间
				function printNum(arcX,arcY,num){
					var print=numbers[num];	
					for(i=0;i<print.length;i++){						
						var Y=2*R*i+arcY;//数字高度
						for(j=0;j<print[i].length;j++){
							var X=2*R*j+arcX;//数字宽度
							if(print[i][j]==1){
								ctx.beginPath();
								
								ctx.fillStyle="white";
								ctx.arc(X,Y,R,0,2*Math.PI);
								ctx.fill();
						}
						}						
					}			
				}
		</script>
	</body>
</html>
